<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="props.form"
      :rules="props.rules"
      status-icon
      class="form-option"
    >
      <h4>公告类型</h4>
      <el-form-item>
        <el-select-v2 v-model="props.form.type" placeholder="" :options="menuSort" />
      </el-form-item>
      <!-- 接受人 -->
      <h4>接受人</h4>
      <el-form-item>
        <el-select
          v-model="props.form.recipient_id"
          filterable
          collapse-tags
          collapse-tags-tooltip
          multiple
          placeholder="选择负责人"
          size="large"
          style="width: 100%"
          popper-class="el-person"
        >
          <el-option
            v-for="item in userlistData"
            :key="item.id"
            :label="item.userName"
            :value="item.id"
          >
            <div class="person-list">
              <el-avatar
                size="small"
                :src="
                  item.avatar
                    ? item.avatar
                    : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
                "
              />
              <span class="name">{{ item?.userName }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 开始日期---截止日期 -->
      <h4>开始日期---截止日期</h4>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="props.form.time_range"
            type="daterange"
            range-separator="-"
            start-placeholder="未设置"
            end-placeholder="未设置"
            size="large"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </div>
      </el-form-item>
      <!-- 优先级 -->
      <h4>优先级</h4>
      <el-form-item>
        <el-select
          v-model="props.form.priority"
          filterable
          placeholder="请选择"
          size="large"
          style="width: 100%"
          popper-class="el-priority"
        >
          <el-option
            v-for="item in optPriority"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <div class="priority-box">
              <span>{{ item.label }}</span>
              <div class="icon-box" :style="{ background: item.iconColor }"></div>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, computed, defineExpose, reactive } from 'vue'
import { ElMessage, FormRules } from 'element-plus'
import MultiSelect from './MultiSelect.vue'
import { getPageList } from '@/apis/system/system'
import { getDepartmentList } from '@/apis/system/department'
import { ItagsData, Issues } from '@/views/issues/config/issues'
// import { getTagsList } from '@/apis/issues/issues-tags'
// import { store } from '@/store/issues'
// import { storeToRefs } from 'pinia'
import { Itype } from '@/type/index'
import { deepCopy } from '@/utils/tools'
import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'

const props = defineProps({
  form: {
    type: Object,
    required: true,
    default: () => {}
  },
  rules: {
    type: Object,
    required: true,
    default: () => {}
  }
})

const ruleFormRef = ref()
const emit = defineEmits(['send-tagsDialog', 'change'])

const userData = userStore()
userData.getUserData()
const { userlistData } = storeToRefs(userData)

const menuSort = reactive([
  {
    value: '通知',
    label: '通知'
  },
  {
    value: '公告',
    label: '公告'
  }
])
const state = reactive({
  defaultProps: {
    children: 'children',
    label: 'label'
  },
  defaultProp: {
    children: 'children',
    label: 'name'
  }
})
/**
 * @desc: 全选
 */
const isIndeterminate = ref(true)
const checkAll = ref(false)
/**
 * @desc: 获取标签信息
 */
onMounted(async () => {
  //   await issueStore.getTagsData()
})
/**
 * @desc: 选择框
 */
const recipient = ref([])
const change = (data: []) => {
  recipient.value = data
  emit('change', recipient.value)
}
/**
 * @desc:对象转数组
 */
// let userLists: Itype = userList.value
// let arrs: Itype = ref([])
// Object.keys(userLists).forEach(function (key: string) {
//   if (arrs.value && arrs.length) {
//     arrs.value.push({
//       value: key,
//       label: userLists[key]
//     })
//   }
// })
/**
 *
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('userInfo') as string) || ''
})
// 优先级
const optPriority = [
  {
    value: '紧急且重要',
    label: '紧急且重要',
    iconColor: '#B0B0B0'
  },
  {
    value: '重要但不紧急',
    label: '重要但不紧急',
    iconColor: '#EF0016'
  },
  {
    value: '紧急但不重要',
    label: '紧急但不重要',
    iconColor: '#FF8F00'
  },
  {
    value: '不紧急也不重要',
    label: '不紧急也不重要',
    iconColor: '#008AFF'
  }
]
/**
 * @desc:获取人员信息
 * @param {Array} search 搜索
 */
// const loading = ref(false)
// let pager = ref({
//   page: 1,
//   size: 10,
//   total: 0
// })
// let peopleList = ref()
// let search = ref<object[]>()
// const getPeople = () => {
//   loading.value = true
//   let params = {
//     page: pager.value.page,
//     size: pager.value.size,
//     search: search?.value
//   }
//   getPageList(params)
//     .then((res) => {
//       if (res.data && res.code !== 200) return
//       pager.value = {
//         page: res.data.current_page,
//         size: res.data.per_page,
//         total: res.data.total
//       }
//       let arr: any = []
//       res.data?.data.map((item: { connect: [''] }) => {
//         if (!item.connect[0]) return
//         arr.push(item.connect[0])
//       })
//       peopleList.value = arr
//       let peopleLists: any = ref([])
//       Object.keys(peopleList.value).forEach(function (key: string) {
//         peopleLists.value.push({
//           value: key,
//           label: peopleList.value[key]
//         })
//       })
//       loading.value = false
//     })
//     .catch((res) => {
//       ElMessage('服务器内部错误')
//     })
// }
// getPeople()
</script>

<style lang="less" scoped>
.right-content {
  overflow-y: auto;
}
.form-option {
  height: auto !important;
  background-color: #fff !important;
}
h4 {
  padding-bottom: 20px;
}
.block {
  :deep(.el-range-editor.el-input__wrapper) {
    width: 92%;
  }
}
</style>
